<template>
    <view class="search_top_nav">
        <view :style="{ height: statusBarHeight }" class="status_bar"></view>
        <view class="search_nav_content">
            <view @click="back" style="width: 76rpx; height: 88rpx">
                <image
                    style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"
                ></image>
            </view>
            <label class="search_title">搜索</label>
        </view>
        <view style="display: flex; flex-direction: row; width: 100%">
            <view class="search_bar">
                <image
                    style="margin-left: 30rpx; height: 40rpx; width: 40rpx"
                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search.png"
                ></image>
                <input
                    v-model="keyValue"
                    @confirm="searchEvent"
                    confirm-type="search"
                    placeholder="搜索食品/话题/动态/用户"
                    placeholder-style="color:rgba(45, 49, 48,0.5);"
                    class="search_input"
                />
            </view>
            <view @click="cancelEvent" class="btn_cancel">取消</view>
        </view>
        <view class="search_menu">
            <view
                @click="changeEvent(index)"
                :class="index == selIndex ? 'search_menu_item_sel' : 'search_menu_item'"
                v-for="(item, index) in menu"
                :key="index"
                >{{ item }}</view
            >
        </view>
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
    name: 'search-top-nav',
    data() {
        return {
            statusBarHeight: statusBarHeight,
            menu: ['食品', '话题', '动态', '用户'],
            selIndex: 0,
            keyValue: '',
        };
    },
    methods: {
        imgUrl() {
            return this.request.appImageBaseUrl;
        },
        back() {
            uni.navigateBack();
        },
        changeEvent(index) {
            this.selIndex = index;
            this.$emit('menuChange', this.selIndex);
        },
        searchEvent(e) {
            this.$emit('searchKey', e.detail.value);
        },
        cancelEvent() {
            uni.hideKeyboard();
            this.keyValue = '';
            this.$emit('searchKey', '');
        },
    },
};
</script>

<style>
.search_top_nav {
    width: calc(100% - 4rpx);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
    border: 2rpx solid #ffffff;
    z-index: 998;
}
.status_bar {
    height: 20px;
    width: 100%;
}
.search_nav_content {
    height: 88rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
}
.search_title {
    width: 100rpx;
    left: calc(50% - 50rpx);
    position: absolute;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #000000;
    font-size: 32rpx;
    font-weight: 500;
}
.search_bar {
    margin-left: 30rpx;
    margin-top: 20rpx;
    width: 604rpx;
    height: 88rpx;
    background: #f3f7f6;
    border-radius: 24rpx;
    border: 2rpx solid #234941;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.search_input {
    margin-left: 8rpx;
    width: calc(100% - 98rpx);
    font-size: 28rpx;
    color: #2d3130;
}
.btn_cancel {
    height: 88rpx;
    width: 110rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 28rpx;
    color: #2d3130;
    margin-top: 20rpx;
}
.search_menu {
    margin-top: 8rpx;
    height: 86rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
}
.search_menu_item {
    height: 86rpx;
    width: 25%;
    line-height: 86rpx;
    font-size: 30rpx;
    text-align: center;
    font-weight: 500;
    color: #999999;
}
.search_menu_item_sel {
    height: 86rpx;
    width: 25%;
    line-height: 86rpx;
    font-size: 30rpx;
    text-align: center;
    font-weight: 500;
    color: #333333;
    position: relative;
}
.search_menu_item_sel::after {
    content: '';
    position: absolute;
    left: calc(50% - 16rpx);
    top: auto;
    bottom: 0;
    right: auto;
    height: 6rpx;
    width: 32rpx;
    background: linear-gradient(296deg, #36a782 0%, #56ccab 100%);
    box-shadow: 0px -4rpx 16rpx 0rpx rgba(57, 171, 134, 0.5);
}
//为了站位
.search_placeholder_view {
    height: 290rpx;
}
</style>
